<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Icon, Field, showConfirmDialog, Swipe, SwipeItem, showToast, Popup } from "vant";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { RouterEnums } from "@/types";
import { WalletAxios } from "@/api";
import moment from "moment";
import { FiltrationFun } from "@/utils";
import { UserStore } from "@/store";
const userStore = UserStore();
const { t } = useI18n();
const moneyVal = ref("");
const router = useRouter();
const openDialog = () => {
  if (bankCardList.value.length === 0) {
    popupShow.value = true;
    // showConfirmDialog({
    //   title: t("withdrawals.confirmation"),
    //   message: t("withdrawals.confirmationContent"),
    //   confirmButtonText: t("withdrawals.confirmationButtom"),
    //   overlayStyle: { backgroundColor: "#00000099" },
    // }).then(() => {
    //   // on close
    //   router.push(RouterEnums.ADDCARDS);
    // });
  }
};
onMounted(() => {
  getUserEpayBankCardList();
  getEpayPaymentMethods();
});
//提现最大值和提现最小值
const withdrawMin = ref(0);
const withdrawMax = ref(0);
const getEpayPaymentMethods = () => {
  WalletAxios.getEpayPaymentMethods().then(res => {
    withdrawMin.value = res.paymentMethod.withdrawMin / 100;
    withdrawMax.value = res.paymentMethod.withdrawMax / 100;
  });
};
const bankCardList: any = ref([]);
const fieldType = ref(false);
const intiType = ref(false);
//获取银行卡
const getUserEpayBankCardList = () => {
  if (userStore.isLogin) {
    WalletAxios.getUserEpayBankCardList()
      .then(res => {
        bankCardList.value = res.data;
        fieldType.value = bankCardList.value.length > 0 ? false : true;
      })
      .finally(() => {
        intiType.value = true;
      });
  } else {
    intiType.value = true;
  }
};
const gotoPage = () => {
  router.push(RouterEnums.ADDCARDS);
};
function modifyString(str) {
  return str.replace(/[a-zA-Z]+/g, match => {
    return match.charAt(0).toUpperCase() + match.slice(1).toLowerCase();
  });
}
//替换字符串
function maskString(str) {
  const len = str.length;
  if (len <= 4) {
    return str; // 如果字符串长度小于或等于4，直接返回原字符串
  }
  const maskedPart = "*".repeat(len - 4); // 计算需要替换的部分长度
  const lastFour = str.slice(-4); // 获取字符串的最后四个字符
  return maskedPart + lastFour; // 拼接替换后的部分和最后四个字符
}
const swipeIndex = ref(0);
//监听轮播图的变化
const swipeChange = e => {
  swipeIndex.value = e;
};
//监听输入
const upDataMoney = () => {
  if (
    moneyVal.value !== "" &&
    Number(moneyVal.value) >= withdrawMin.value &&
    Number(moneyVal.value) <= withdrawMax.value
  ) {
    submitType.value = true;
  } else {
    submitType.value = false;
  }
};
//监听输入密码的
// const upDataPassword = () => {
//   if (
//     passwordVal.value.length >= 6 &&
//     moneyVal.value !== "" &&
//     Number(moneyVal.value) >= 300 &&
//     Number(moneyVal.value) < 25000
//   ) {
//     submitType.value = true;
//   } else {
//     submitType.value = false;
//   }
// };
//提交状态
const submitType = ref(false);
//提交表单
const submitForm = () => {
  if (Number(moneyVal.value) > userStore.balance) {
    showToast(t("tip.insufficientBalance"));
    return false;
  }
  //打码量不为0
  if (userStore.withdrawDama > 0) {
    showToast(t("withdrawals.showConfirmDialog.code2007"));
    return false;
  }
  if (
    moneyVal.value !== "" &&
    Number(moneyVal.value) >= withdrawMin.value &&
    Number(moneyVal.value) <= withdrawMax.value
  ) {
    if (bankCardList.value.length > 0) {
      const data = {
        bankId: bankCardList.value[swipeIndex.value].id,
        currencyAmount: FiltrationFun.ensureTwoDecimalPlaces(moneyVal.value),
      };
      WalletAxios.createEpayWithdrawalPaymentOrder(data).then(res => {
        if (res.code === 0) {
          showToast({
            message: "success",
            icon: "passed",
          });
        } else if (res.code === 2007) {
          showConfirmDialog({
            //用户打码量不为0，不让提现
            title: t("withdrawals.showConfirmDialog.title"),
            message: t("withdrawals.showConfirmDialog.code2007"),
            confirmButtonText: t("withdrawals.confirmationButtom"),
            overlayStyle: { backgroundColor: "#00000099" },
          });
        } else if (res.code === 1006) {
          showConfirmDialog({
            //交易密码错误
            title: t("withdrawals.showConfirmDialog.title"),
            message: t("withdrawals.showConfirmDialog.code1006"),
            confirmButtonText: t("withdrawals.confirmationButtom"),
            overlayStyle: { backgroundColor: "#00000099" },
          });
        } else if (res.code === 2008) {
          //提现金额小于最小值，不让提现
          showConfirmDialog({
            title: t("withdrawals.showConfirmDialog.title"),
            message: t("withdrawals.showConfirmDialog.code2008"),
            confirmButtonText: t("withdrawals.confirmationButtom"),
            overlayStyle: { backgroundColor: "#00000099" },
          });
        } else if (res.code === 2009) {
          //提现金额大于最大值，不让提现
          showConfirmDialog({
            title: t("withdrawals.showConfirmDialog.title"),
            message: t("withdrawals.showConfirmDialog.code2009"),
            confirmButtonText: t("withdrawals.confirmationButtom"),
            overlayStyle: { backgroundColor: "#00000099" },
          });
        } else if (res.code === 2010) {
          //充值金额小于最小值，不让提现
          showConfirmDialog({
            title: t("withdrawals.showConfirmDialog.title"),
            message: t("withdrawals.showConfirmDialog.code2010"),
            confirmButtonText: t("withdrawals.confirmationButtom"),
            overlayStyle: { backgroundColor: "#00000099" },
          });
        } else if (res.code === 2016) {
          //交易密码校验错误
          showConfirmDialog({
            title: t("withdrawals.showConfirmDialog.title"),
            message: t("withdrawals.showConfirmDialog.code2016"),
            confirmButtonText: t("withdrawals.confirmationButtom"),
            overlayStyle: { backgroundColor: "#00000099" },
          });
        }
      });
    }
  }
};
const popupShow = ref(false);
const closePopup = () => {
  popupShow.value = false;
  router.push(RouterEnums.ADDCARDS);
};
</script>
<template>
  <!-- 孟加拉提款 -->
  <div class="withdrawals-page-frame">
    <!-- <div class="title-frame">
      <div class="title-text-frame df ai-center jc-center">
        <img class="cars-img-frame" src="@/image/new_img/home/recharge/cars-img.png" />
        {{ t("withdrawals.ewallet") }}
      </div>
    </div> -->
    <div class="cards-title-frame">
      <div class="cards-title-text">{{ t("withdrawals.bound") }} ({{ bankCardList.length }}/2)</div>
      <div class="withdraw-nbank" v-if="bankCardList.length === 0 && intiType">
        <img src="@/image/new_img/home/recharge/no_cards.png" />
        <div class="span-frame">{{ t("withdrawals.empty") }}</div>
      </div>
      <div class="my-swipe-frame" v-if="bankCardList.length > 0 && intiType">
        <Swipe class="my-swipe" indicator-color="white" @change="swipeChange">
          <SwipeItem class="swipeItem-frame" v-for="(item, index) in bankCardList" :key="index">
            <img
              v-if="index === 0"
              class="swipe-img"
              src="@/image/new_img/home/recharge/ewallet-img.png"
            />
            <img
              v-if="index === 1"
              class="swipe-img"
              src="@/image/new_img/home/recharge/ewallet-img2.png"
            />
            <div class="swipe-frame">
              <div class="name-card-frame">
                <img class="yinhangka-img" src="@/image/new_img/home/recharge/yinhangka.png" />
                {{ modifyString(item.openingBank.substr(4)) }}
              </div>
              <div class="add-card-number">
                {{ maskString(item.receivingAccount) }}
              </div>
              <div class="add-card-time">
                {{ moment(item.createTime).format("YYYY-MM-DD") }}
              </div>
            </div>
          </SwipeItem>
          <template #indicator>
            <div class="custom-indicator df jc-center jc-center" v-if="bankCardList.length > 1">
              <div
                class="selectSwipe"
                v-for="(item, index) in bankCardList"
                :key="index"
                :name="item.id"
                :class="{ 'select-Swipe': index == swipeIndex }"
              ></div>
            </div>
          </template>
        </Swipe>
      </div>
    </div>
    <div
      class="divider-frame df ai-center jc-center"
      v-if="bankCardList.length < 2"
      @click="gotoPage"
    >
      <Icon name="plus" color="#ffffff" size="16px" />
      <!-- <Divider :style="{ height: '4px', borderColor: '#dedede' }" content-position="right">
        <div class="add-cards df ai-center jc-center" @click="gotoPage">
          <Icon name="plus" color="#ffffff" size="33px" />
        </div>
      </Divider> -->
    </div>
    <div class="content-radius-frame">
      <div class="title-text-content">
        <div class="title-text1">
          {{ t("withdrawals.withdrawalTime") }} 24 {{ t("withdrawals.hours") }}
        </div>
        <div class="title-text2">{{ t("withdrawals.withdrawalContent") }}</div>
        <div class="title-text3">
          {{ t("withdrawals.withdrawalRules") }}
        </div>
        <div class="title-text4" v-if="userStore.withdrawDama > 0">
          <!-- 还需要打码量 -->
          {{ t("withdrawals.withdrawDamaText.text1") }} {{ t("currencyType.pt") }}:{{
            userStore.withdrawDama
          }}
          {{ t("withdrawals.withdrawDamaText.text1") }}
        </div>
        <div class="title-text4">
          {{ t("withdrawals.mainWallet") }} : {{ t("currencyType.pt")
          }}{{
            Number(userStore.balance) === 0 ? "0.00" : FiltrationFun.formatNumber(userStore.balance)
          }}
        </div>
        <!-- <div class="title-text4">
        {{ t("withdrawals.availableamount") }}:{{ t("currencyType.pt") }}0.00
      </div> -->
      </div>

      <div class="input-frame">
        <div class="input-title-text">{{ t("withdrawals.withdrawalVal") }}：</div>
        <div class="input-name-text">{{ t("withdrawals.amount") }}{{ fieldType }}</div>
        <div class="df ai-center input-content-frame" @click.stop="openDialog">
          <div class="field-frame">
            <Field
              v-model="moneyVal"
              type="number"
              :placeholder="`${withdrawMin}~${FiltrationFun.formatNumber(withdrawMax)}`"
              @update:model-value="upDataMoney"
              @click="openDialog"
            />
          </div>
        </div>
        <!-- <div class="df ai-center input-content-frame" @click="openDialog">
        <div class="input-name-text">
          {{ t("withdrawals.transactionPassword") }}
        </div>
        <div class="field-frame">
          <Field
            v-model="passwordVal"
            type="password"
            :placeholder="t('withdrawals.passwordPlaceholder')"
            @update:model-value="upDataPassword"
          />
        </div>
      </div> -->
        <div class="submit-frame" :class="{ 'submit-true': submitType }" @click="submitForm">
          {{ t("withdrawals.submit") }}
        </div>
      </div>
    </div>
    <Popup
      v-model:show="popupShow"
      position="center"
      z-index="500"
      duration="0.1"
      style="height: 100%; max-width: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5)"
      :overlay="false"
      :safe-area-inset-top="true"
      :safe-area-inset-bottom="true"
      overlay-class="overlay-Popup df ai-center jc-center"
    >
      <div class="popup-frame">
        <img class="dui-bai-img" src="@/image/new_img/home/dui_bai.png" />
        <div class="popup-title">{{ t("withdrawals.confirmation") }}</div>
        <div class="popup-text">{{ t("withdrawals.confirmationContent") }}</div>
        <div class="buttom-frame" @click="closePopup">
          {{ t("withdrawals.confirmationButtom") }}
        </div>
      </div>
    </Popup>
  </div>
</template>
<style lang="less" scoped>
.withdrawals-page-frame {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-image: url(/src/image/new_img/main_bg_2.png);
  .title-frame {
    width: 100%;
    height: 90px;
    .title-text-frame {
      width: calc(100% - 20px);
      height: 100%;
      color: #ec2529;
      font-size: 32px;
      border-bottom: 6px solid #ec2529;
      margin: auto;
    }
  }
  .cards-title-frame {
    width: calc(100% - 84px);
    margin: auto;
    margin-top: 36px;
    .cards-title-text {
      color: rgba(255, 255, 255, 0.85);
      font-size: 30px;
    }
    .withdraw-nbank {
      width: 211px;
      height: auto;
      position: relative;
      left: 0;
      right: 0;
      margin: auto;
      margin-top: 42px;
      margin-bottom: 20px;
      img {
        width: 100%;
        height: 200px;
      }
      .span-frame {
        color: #a9a9a9;
        font-size: 30px;
        margin: auto;
        text-align: center;
        margin-top: 6px;
      }
    }
  }
  .divider-frame {
    width: calc(100% - 84px);
    height: auto;
    margin-top: 140px;
    border-radius: 16px;
    height: 68px;
    background-color: rgba(255, 255, 255, 0.15);
    margin: auto;
    .add-cards {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      background-color: #ec2529;
      color: #ffffff;
      font-size: 99px;
      font-weight: 100;
    }
  }
  .title-text-content {
    width: calc(100% - 84px);
    color: rgba(255, 255, 255, 0.55);
    font-size: 24px;
    margin: auto;
    .title-text2 {
      line-height: 34px;
      margin-top: 10px;
    }
    .title-text3 {
      margin-top: 60px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .title-text4 {
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 10px;
    }
  }
  .input-frame {
    width: calc(100% - 84px);
    height: auto;
    margin: auto;
    margin-top: 60px;
    .input-content-frame {
      width: 100%;
      height: 100px;
      border-radius: 40px;
      margin-bottom: 40px;
      background: rgba(255, 255, 255, 0.04);
    }
    .input-title-text {
      color: rgba(255, 255, 255, 0.85);
      font-size: 28px;
      margin-bottom: 16px;
    }
    .input-name-text {
      color: #a8a8a8;
      font-size: 24px;
      width: 30%;
      margin-bottom: 10px;
    }
  }
  .submit-frame {
    width: 250px;
    height: 96px;
    text-align: center;
    line-height: 96px;
    border-radius: 33px;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 100px;
    font-size: 32px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin: auto;
  }
  .submit-true {
    color: #ffffff;
    background-image: linear-gradient(69deg, #fe7919 0%, #ab3fe7 100%);
  }
  &::-webkit-scrollbar {
    display: none;
    overflow: -moz-scrollbars-none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
  }
}
.openDialog-class {
  background-color: #00000099 !important;
}
.field-frame {
  width: 60%;
  height: auto;
}
::v-deep .van-field__control::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
  font-size: 32px;
}
::v-deep .van-field__control {
  height: 58px;
}
.overlayclass {
  width: 100%;
  height: 100%;
}
:deep(.van-popup--center) {
  width: 100%;
  height: 100%;
}
.my-swipe-frame {
  width: 100%;
  height: 260px;
  margin: auto;
  margin-top: 20px;
  .my-swipe {
    width: 100%;
    height: 260px;
  }
}
.swipeItem-frame {
  width: 640px !important;
  margin: auto;
  height: 188px;
  position: relative;
  left: 0;
  top: 0;
}
.swipe-img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.swipe-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.name-card-frame {
  font-size: 32px;
  color: #ffffff;
  position: absolute;
  left: 20px;
  top: 35px;
}
.add-card-number {
  font-size: 30px;
  color: #ffffff;
  position: absolute;
  left: 30px;
  top: 90px;
}
.add-card-time {
  color: #ffffff;
  font-size: 22px;
  position: absolute;
  left: 30px;
  bottom: 30px;
}
::v-deep .van-field__control {
  height: 58px;
  color: #ffffff;
  font-size: 32px;
}
.cars-img-frame {
  width: 62px;
  height: 62px;
  margin-right: 30px;
}
.custom-indicator {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: 2;
  .selectSwipe {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #cccccc;
    margin-right: 12px;
  }
  .select-Swipe {
    background-color: #007aff;
  }
}
.content-radius-frame {
  width: 100%;
  min-height: calc(100% - 442px);
  height: auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 60px 60px 0px 0px;
  padding-bottom: 60px;
  padding-top: 36px;
  margin-top: 36px;
}
.popup-frame {
  width: 500px;
  height: 666px;
  border-radius: 50px;
  background: #24142d;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 20;
  .dui-bai-img {
    width: 100px;
    height: 100px;
    margin-top: 100px;
  }
  .popup-title {
    font-size: 36px;
    color: #ffffff;
    margin-top: 32px;
  }
  .popup-text {
    width: 270px;
    height: auto;
    margin: auto;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 16px;
    line-height: 50px;
    text-align: center;
  }
  .buttom-frame {
    width: 250px;
    height: 100px;
    background-image: linear-gradient(69deg, #fe7919 0%, #ab3fe7 100%);
    border-radius: 32px;
    color: #ffffff;
    font-size: 32px;
    line-height: 100px;
    margin: auto;
    margin-top: 20px;
  }
}
.yinhangka-img {
  width: 30px;
  height: 26px;
  margin-left: 10px;
}
</style>
